<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='/common/jquery.js'></script>
</head>


<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    li {
        list-style: none;
    }
    
    .slider-wrapper {
        width: 500px;
        height: 300px;
        overflow: hidden;
        margin: 50px auto;
        position: relative;
        border: 1px solid #ccc;
    }
    
    .slider-content {
        width: 3500px;
        height: 100%;
    }
    
    .slider-content>li {
        width: 500px;
        height: 300px;
        float: left;
        font-size: 100px;
        line-height: 300px;
        text-align: center;
        font-weight: bold;
    }
    
    .slider-content>li.one {
        background-color: red;
    }
    
    .slider-content>li.two {
        background-color: blue;
    }
    
    .slider-content>li.three {
        background-color: yellow;
    }
    
    .slider-content>li.four {
        background-color: green;
    }
    
    .slider-content>li.five {
        background-color: pink;
    }
    
    .nav {
        width: 50px;
        height: 50px;
        background-color: gray;
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -25px;
        cursor: pointer;
    }
    
    .nav-right {
        left: auto;
        right: 0;
    }
    
    .slider-nav-wrapper {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%);
    }
    
    .slider-nav-wrapper>li {
        float: left;
        margin-right: 10px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: black;
        cursor: pointer;
    }
    
    .slider-nav-wrapper>li.on {
        background-color: #ccc;
    }
</style>

<body>
    <div class="slider-wrapper">
        <ul class="slider-content">
            <li class="one">1</li>
            <li class="two">2</li>
            <li class="three">3</li>
            <li class="four">4</li>
            <li class="five">5</li>
            <li class="six">6</li>
        </ul>
        <ol class="slider-nav-wrapper">
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <div class="nav-wrapper">
            <div class="nav nav-left"></div>
            <div class="nav nav-right"></div>
        </div>

        <script>
            let width = $('.slider-content li').width();
            let index = 0;
            let timer = setInterval(function() {
                $('.nav-right').click()
            }, 1000)
            $('.slider-wrapper').on('mouseenter', function() {
                clearInterval(timer)
            })
            $('.slider-wrapper').on('mouseleave', function() {
                timer = setInterval(function() {
                    $('.nav-right').click()
                }, 1000)
            })

            function init() {
                initEvent()
            }

            function initEvent() {
                $('.nav').on('click', onNavClick)
                $('.slider-nav-wrapper').on('click', 'li', onSliderNavWrapperClick)
            }

            function onSliderNavWrapperClick() {
                if ($(':animated').length > 0) {
                    return
                }
                let $this = $(this)
                index = $this.index()
                let currentIndex = $('.slider-nav-wrapper li.on').index();
                $this.addClass('on').siblings().removeClass('on')
                let nextTarImg = $('.slider-content li').eq(currentIndex).next().clone()
                let newTarImg = $('.slider-content li').eq(index).clone()
                let oldTarImg = $('.slider-content li').eq(currentIndex)
                let prevTarImg = $('.slider-content li').eq(currentIndex).prev().clone()
                if (index > currentIndex) {
                    oldTarImg.next().replaceWith($(newTarImg))
                    $('.slider-content').animate({
                        'margin-left': -(currentIndex + 1) * width
                    }, 500, function() {
                        $('.slider-content')
                            .css('margin-left', -index * width)
                        $(oldTarImg).next().replaceWith(nextTarImg)
                    })
                } else if (index < currentIndex) {
                    oldTarImg.prev().replaceWith($(newTarImg))
                    $('.slider-content').animate({
                        'margin-left': -(currentIndex - 1) * width
                    }, 500, function() {
                        $('.slider-content')
                            .css('margin-left', -index * width)
                        $(oldTarImg).prev().replaceWith(prevTarImg)
                    })
                }

            }

            function changeListStyle(index) {
                $('.slider-nav-wrapper li').eq(index).addClass('on').siblings().removeClass('on')
            }

            function onNavClick() {
                let $this = $(this)
                if ($(':animated').length > 0) {
                    return
                }
                if ($this.hasClass('nav-right')) {
                    index++
                    if (index > $('.slider-wrapper ul li').length - 1) {
                        index = 0
                        changeListStyle(index);
                        $('.slider-content li:first').clone().appendTo($('.slider-content'))
                        $('.slider-wrapper ul').css('marginLeft', -($('.slider-wrapper ul li').length - 2) * width)
                        $('.slider-wrapper ul')
                            .animate({
                                'marginLeft': -($('.slider-wrapper ul li').length - 1) * width
                            }, 500, function() {
                                $(this).css('marginLeft', 0)
                                $('li:last', $(this)).remove()
                            })
                    } else {
                        $('.slider-nav-wrapper li').eq(index).addClass('on').siblings().removeClass('on')
                        $('.slider-content').animate({
                            'margin-left': -index * width
                        }, 500)
                    }
                } else {
                    index--
                    if (index < 0) {
                        index = $('.slider-wrapper ul li').length - 1;
                        changeListStyle(index);
                        $('.slider-content li:last').clone().prependTo($('.slider-content'))
                        $('.slider-wrapper ul').css('marginLeft', -width)
                        $('.slider-wrapper ul')
                            .animate({
                                'marginLeft': 0
                            }, 500, function() {
                                $(this).css('marginLeft', -(index + 1) * width)
                                $('li:first', $(this)).remove()
                                $(this).css('marginLeft', -(index) * width)
                            })
                    } else {
                        changeListStyle(index);
                        $('.slider-wrapper ul')
                            .animate({
                                'marginLeft': -index * width
                            }, 500)
                    }
                }
            }
            init()
        </script>
    </div>
</body>

</html>